<template>
  <div class="tmpl">
<!-- 商品轮播subimgsilder.vue -->
<div>
    <SubImgsilder :imagelist="imagelist"></SubImgsilder>
</div>
<!-- 商品购买区 -->

   <div class="sell" v-for="item in imagelist">
     <h4>{{item.title}}</h4>
        <div class="sellprice">
        <s> 市场价￥{{item.market_price}}</s> 销售价<span>￥{{item.seel_price}}</span>  

        </div>
        <div class="count">
            <!-- 这里有+1-1组件subnumder.vue -->
                购买数量：<subnumder class="subnumber" v-on:count="getcount" ></subnumder>
                <!-- 动画小球 -->
               <transition v-on:before-enter="beforeEnter"  v-on:enter="enter" v-on:after-enter="afterEnter">
                 <div v-show="isshow" class="boll"></div>
               </transition>
        </div>
    <mt-button type="primary" size="small">立即购买</mt-button>

    <mt-button type="danger" size="small" @click="toshopdata">加入购物车</mt-button>
    
   </div>


<!-- 商品参数区 -->
<div class="params" v-for="item in imagelist" >
    <h6>商品参数</h6>
    <ul>    
        <li>商品货号：{{item.goods_no}}</li>
        <li>库存情况：{{item.stock_quantity}}</li>
        <li>上架时间：{{item.add_time | fmtdate('YYYY-MM-DD') }}</li>
    </ul>
</div>


<!-- 商品图文信息区<商品评论区 （使用新组件goosdes.vue组件完成）-->
<div class="footer">
    <!-- <mt-button @click="commont" type="danger" size="large" plain>商品评论</mt-button> -->
     <router-link v-bind='{to:"/goods/goodsdesc"}'>
   <mt-button class="mt1" type="primary" size="large" plain>商品介绍</mt-button> 
   </router-link>
   <!-- <mt-button @click="commont" type="danger" size="large" plain>商品评论</mt-button> -->
    <router-link v-bind='{to:"/goods/goodscommont"}'>
        <mt-button type="danger" size="large" plain>商品评论</mt-button>
    </router-link>
</div>





  </div>
</template>

<script>
//导入subimgsilder.vue子组件
import SubImgsilder from '../subcomp/subimgsilder.vue';
//引用key
// import common from '../../kits/common.js';
// 导入subnumbre.vue
import subnumder from '../subcomp/subnumber.vue';
// 注册commonvue.js（用来接收goodsinfovue.vue中通过vueobj.$emit() 发送过来数据
import {vueobjvue} from '../../kits/commonvue.js';
// localStorageHelper.js
import {setItem} from '../../kits/localStorageHelper.js';





export default {
 		data(){
 			return{
                isshow:false,
                goodscount:1,//商品的数量
                goosinfodata:{},//  变量存当前商品描述（价格等）
                //  imagelist:[],
              
                
                imagelist:[
                    {
                     id:31,
                     title:"华为荣耀9 4g+64g 6g+64g",
                     add_time:"2017-9-13",
                     goods_no:"SD564231",
                     stock_quantity:60,
                     market_price:2499,
                     seel_price:2349,

                    }
                ]
 			
             }
            
         }
          ,created(){
                //  this.getimgelist(),
                //  this.goosinfodata()
             }
         ,methods:{
             getimgelist(){
                    let id = this.$route.params.id;
                    let url = common.apihost+'/api/getumimages'+id
                    this.$http.get(url).hten(res=>{
                        res.body.message.forEach(item=>{
                        item.img = common.imghost + item.src;
                        this,imagelist = res.body.message;
                        });
                    });
                 }
              
                 ,getgoodsinfo(){
                     let id = this.$route.params.id;
                     let url = common.apihost+'/api/goods/goodsinfo/'+id
                    this.$http.get(url).then(res=>{
                        this.goosinfodata = res.body.message[0];
                    })
                 }  //  接收子组件传 来的值
                 ,getcount(count){
                    //  console.log('count='+count);
                        this.goodscount = count;
                 }

                    //  方法实现购物数据通知
                ,toshopdata(){
                        // 发通知
                        vueobjvue.$emit('shopdata',this.goodscount);
                         
                        //  将商品购物
                        let id = this.$route.params.id;

                        setItem({goodsid:id,count:this.goodscount});
                        //  动画效果
                        this.isshow = !this.isshow;

                    }
                ,beforeEnter(el){
                        // 动画开始
                        el.style.transform = 'translate3d(0,0,0)';
                },enter(el,done){
                        // 动画进行中
                        var offset = el.offsetWidth; //能让动画实时移动中
                        el.style.transform = 'translate3d(110px,365px,0)';
                        done();
                    },afterEnter(el){
                    //   动画结束,控制动画显示隐藏isshow初始化
                        this.isshow = !this.isshow;
                    }

                 //  商品评论
            ,comment(){
                // 获取商品id
                let id = this.$route.params.id;
                // 跳转到商品评价组件commont.vue
                this.$route.push({name:'/goodscommont',params:{id:id}});
           }
           
            //  商品图文
            ,desc(){
                let id = this.$route.params.id;
                this.$route.push({name:'/goodsdesc',params:{id:id}});
            }


         } 
   

      
         //  子组件引用
        ,components:{
            SubImgsilder,
            subnumder
        }
 		
}
</script>

<style lang="scss" scoped>
ul li{
    list-style: none;
}
.sell, .params,.footer{
    border-bottom: 1px solid #eeeeee;
    border-top: 1px solid #eeeeee;
      padding:0 10px 15px ;
}
// 商品购买区
.sell h4{
    color: #0049ff;
    padding: 10px 0;
    border-bottom: 1px solid #eeeeee;
}
.sellprice{
    padding:10px 0px;
    font-size: 14px;
}
.sell .sellprice span{
    color:  red;
    font-size: 18px;

}
.sell .sellprice s{
    color: #bbb;
    font-size: 12px;
    margin: 0 50px 0 0;
}

// 数量+1-1
.count{
    position: relative;
    padding:5px 0 20px ;
    font-size: 12px;
}
.subnumber{
display: inline-block;
margin: 0 0 0 15px;
}

// 小球动画
.boll{
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top:-3px ;
    left:120px;
    z-index: 50;
    transition:all .8s cubic-bezier(.27,-0.3,.72,.55);
    // opacity: 0;
}
// 小球动画控制
// .drop-enter-active, .drop-leave-active {
//   transition: all .7s;
//    transform: translate(80px,270px);
// }
// .drop-enter, .drop-leave-to {
//   opacity: 0;
 
// }

// 小球动画^^^^^^


// 商品购买区^^^^^^

// 商品参数区
.params{
    margin: 5px 0 0 0;
}
.params h6{
    border-bottom: 1px solid #eee;
    padding: 10px;
    font-size: 14px;
    color: #363636
    }
.params ul{
    margin: 0 0;
    padding: 0 0 0 20px;
    }
.params ul li {
  font-size: 12px;
  padding: 1px 0;
  color: #696969;
}

// 商品参数区^^^^^^^^


// 商品图文信息区品评论区
.mt1{
margin:  10px 0;
}

</style>
